<template>
    <Page class="basic company">
        <template #header>
            <!-- <EdSelect v-model="queryForm.orgId" :selectParams="selectParamsOrg"></EdSelect> -->
            <EdCascader v-model="queryForm.orgId" @input="handleCascader" :cascaderParams="selectParamsOrg"></EdCascader>
            <!-- <el-input v-model="queryForm.personnelNo" placeholder="请输入用户账号" /> -->
            <el-input v-model="queryForm.mobile" placeholder="请输入用户手机号" />
            <EdSelect v-model="queryForm.isBind" :selectParams="selectParams"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="物业人员管理">
            <template #actions>
                 <el-popover
                        placement="bottom"
                        title=""
                        ref="popoverRef"
                        trigger="click">
                    <div slot="">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                drag
                                accept=".xlsx"
                                :before-upload="beforeAvatarUpload"
                                :http-request="httpRequest"
                                :show-file-list="false">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">
                                <el-link icon="el-icon-download" type="primary" download="物业人员导入模板.xlsx" href="/template/物业人员导入模板.xlsx">物业人员模板下载</el-link>
                            </div>
                        </el-upload>
                    </div>
                    <el-button slot="reference"  class="ed-button ed_white_bottom marginRight8 ed-button36" v-has="'basic:member:import'"><i class="el-icon-download"></i>批量导入</el-button>
                </el-popover>
                <!-- <el-button class="ed-button ed_white_bottom" @click="exportBtn()"><svg-icon icon-class="export-svg"/>导出数据</el-button> -->

                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'basic:member:add'"><svg-icon icon-class="add-svg"/>添加物业人员</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="id" label="id"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="enterpriseName" label="所属公司"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="orgName" label="所属组织"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="personnelName" label="姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="mobile" label="人员手机号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="loginName" label="登录账号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="jobStatus" label="在职状态">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['jobStatus'], selectParamsJobStatus.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="userType" label="管理类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['userType'], selectParamsUserType.options)}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column :show-overflow-tooltip="true" prop="personnelType" label="岗位类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['personnelType'], selectParamsJobType.options)}}</span>
                    </template>
                </el-table-column> -->
                <el-table-column width="180" :show-overflow-tooltip="true" prop="userFunction" label="所属职能"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="isBind" label="微信绑定">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['isBind'], selectParams.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="accountStatus" label="账号状态">
                    <template slot-scope="scope">
                        {{scope.row.accountStatus == '0' ? '停用' : '启用'}}
                        <el-switch
                            :value="scope.row.accountStatus == '1' ? true : false"
                            @change="switchChange(scope.row, scope.row.accountStatus == '1' ? '0' : '1')"
                            active-color="#EED096"
                            inactive-color="#909399">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="" label="操作">
                     <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'basic:member:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button style="margin-right: 10px" class="ed-table-bottom ed_delete_border" v-has="'basic:member:delete'" @click="del(scope.row)">删除</el-button>
                        <el-popconfirm
                            title="确定重置密码吗？"
                            @confirm="resetPwd(scope.$index, scope.row)"
                            >
                            <el-button slot="reference" class="ed-table-bottom ed_green_border" v-has="'system:user:resetpwd'">重置密码</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdConfirmDelete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></EdConfirmDelete>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdCascader from 'src/components/EdCascader.vue'
import { defineComponent } from 'vue'
import { getOrgList, memberList, memberDetele, batchImport, memberAccount } from "./api";
import { resetpwd } from 'src/api/user'
import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
import { returnName } from "src/utils/common.js";
import { getDictByCode } from "src/api/dictionaries";
export default defineComponent({
    name: 'member',
    components: { Page, PageCard, ApiTable, EdSelect, EdConfirmDelete, EdCascader },
    data() {
        return {
            queryForm: {
                orgId:"",
                // personnelNo: '',
                mobile: '',
                isBind:"",
            },
            selectParamsOrg:{
                options: [],
                placeholder:"请选择所属组织",
                props: { value: 'orgId', label: 'orgName' }

            },
            selectParams:{
                options: [{
                    value: '1',
                    label: '绑定'
                }, {
                    value: '0',
                    label: '未绑定'
                }],
                placeholder:"是否绑定微信"
            },
            selectParamsJobStatus:{
                options: [{
                    value: '0',
                    label: '在职'
                }, {
                    value: '1',
                    label: '离职'
                }],
                placeholder:"请选择在职状态"
            },
            selectParamsUserType:{
                options: [],
                placeholder:"请选择管理类型"
            },
            selectParamsJobType:{
                options: [],
                placeholder:"请选择岗位类型"
            },
            selectParamsFunctions:{
                options: [],
                placeholder:"请选择所属职能",
            },
            upFile:new FormData(),
            isUse: true,
            isStop: false,
        }
    },
    activated(){
        this.getSelectData();
        // 管理类型
        getDictByCode('member_user_type').then(res=>{
            this.selectParamsUserType.options = res.data.items;
        })
        // 岗位类型
        getDictByCode('member_job_type').then(res=>{
            this.selectParamsJobType.options = res.data.items;
        })
        // 所属职能
        getDictByCode('member_functions_type').then(res=>{
            this.selectParamsFunctions.options = res.data.items;
        })
        this.$nextTick(() => {
            this.$refs.table.load(1);
        })
    },
    // mounted(){
    //     this.$nextTick(() => {
    //         this.$refs.table.load(1);
    //     })
    // },
    methods: {
        // tableApi(params) {
        //     console.log(params)
        // },
        tableApi: memberList,
        // 获取数据
        getSelectData(){
            getOrgList().then((res) => {
                // console.log('org--->', res)
                let arr = [];
                // arr.push({ value: res.data.orgId, label: res.data.orgName })
                // this.selectParamsOrg.options = arr;
                arr.push(res.data)
                this.selectParamsOrg.options = arr;
            })
        },
        search(){
            console.log('search-->', this.queryForm)
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm = {
                orgId:"",
                // personnelNo: '',
                mobile: '',
                isBind:"",
            };
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        add(){
            this.$router.push({
                path: '/basic/member-add'
            })
        },
        updateRow(row){
            this.$router.push({
                path: '/basic/member-update',
                query: { id: row.id },
            })
        },
        del(row){
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
        },
        // 删除回调
        confirmDeleteTrue(){
            memberDetele({id: this.confirmRow.id}).then(response => {
                if(response.code == 20000) {
                    this.$message.success({
                        message: '删除成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load()
                }
            })
        },
        // 导入
        beforeAvatarUpload(file){
            const fileType = file.name.split('.');
            const fileDate = fileType.slice(-1);
            if (['xlsx'].indexOf(fileDate[0]) < 0) {
                this.$message.error('仅支持文件格式：.xlsx');
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < 30;
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }
            if(isLt2M){
                this.upFile = new FormData();
                this.upFile.append("file",file)
            }
            return isLt2M;
        },
        httpRequest(){
            batchImport(this.upFile).then(response => {
                if(response.code == 20000) {
                    this.$message.success({
                        message: '导入成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load(1)
                }
                this.$refs.popoverRef.doClose()
            }).catch(()=>{
                this.$refs.popoverRef.doClose()
            })
        },
        // 导出
        exportBtn(){
            this.dataApi.pages = this.$refs.table.getTabledData();
            if(this.dataApi.pages > 0){
                this.dataApi = Object.assign(this.dataApi,this.queryForm);
                this.isEdExport = true;
            }else {
                this.$message.info({
                    message:"暂无数据导出",
                    duration: 2000,
                    center:true
                })
            }
        },
        exportSuccess(){
            this.isEdExport = false;
        },
        // 启用/停用
        switchChange(row, value){
            let params = {
                id: row.id,
                accountStatus: value,
            }
            memberAccount(params).then(res => {
                if(res.code === 20000){
                    this.$message.success({
                        message: value == '1' ? '启用成功' : '停用成功',
                        duration: 2000,
                        center:true
                    })
                    this.$refs.table.load()
                }
            })
        },
        handleCascader(data){
            this.queryForm.orgId = data[1];
            this.orgIdArr = data;
        },
        returnName(val, options){
            return returnName(val, options)
        },
        // 重置密码
        resetPwd(index, row) {
            resetpwd({
                id: row.userId,
            }).then((response) => {
                if (response.code == 20000) {
                let data = response.data
                this.$confirm(
                    `您的密码已被修改为<strong>${data}</strong>`,
                    '重置成功',
                    {
                        confirmButtonText: '复制',
                        cancelButtonText: '取消',
                        center: true,
                        type: 'success',
                        closeOnClickModal: false,
                        dangerouslyUseHTMLString: true,
                    },
                )
                    .then(() => {
                    //创建一个input元素
                    let input = document.createElement('input')
                    //给input的内容复制
                    input.value = data
                    // 在body里面插入这个元素
                    document.body.appendChild(input)
                    // 选中input里面内容
                    input.select()
                    //执行document里面的复制方法
                    document.execCommand('Copy')
                    // 复制之后移除这个元素
                    document.body.removeChild(input)
                    this.$message.success({
                        message: '复制成功',
                        duration: 2000,
                        center: true,
                    })
                    })
                    .catch(() => {})
                }
            })
            },
    }
})
</script>

<style scoped>
</style>